<template>
  <el-container class="main-container">
    <!-- 头部导航栏 -->
    <el-header class="app-header">
      <div class="header-content">
        <div class="logo-area">
          <span class="logo-text" @click="goHome">🌱</span>
          <el-link class="system-name" @click="goHome">农产品宣传直播销售系统</el-link>
        </div>

        <div class="nav-links">
          <el-link class="nav-link" :underline="false" @click="goToSupportingFarmers">
            <el-icon><opportunity /></el-icon>
            国家助农宣传
          </el-link>
          <el-link class="nav-link" :underline="false" @click="goToLive">
            <el-icon><video-play /></el-icon>
            直播
          </el-link>
<!--          <el-dropdown class="nav-dropdown">-->
<!--            <span class="nav-link">-->
<!--              <el-icon><menu /></el-icon>-->
<!--              更多服务<el-icon class="el-icon&#45;&#45;right"><arrow-down /></el-icon>-->
<!--            </span>-->
<!--            <template #dropdown>-->
<!--              <el-dropdown-menu>-->
<!--                <el-dropdown-item @click="goToAgriculturalTraceability">农产品溯源</el-dropdown-item>-->
<!--                <el-dropdown-item @click="goToSupportPolicy">助农政策</el-dropdown-item>-->
<!--                <el-dropdown-item @click="goToAgriculturalTech">农业技术</el-dropdown-item>-->
<!--              </el-dropdown-menu>-->
<!--            </template>-->
<!--          </el-dropdown>-->
        </div>

        <div class="search-area">
          <el-input
              placeholder="搜索农产品..."
              class="search-input"
              size="large"
              v-model="searchKeyword"
              @keyup.enter="searchProductsMeth()"
          >
            <template #prefix>
              <el-icon><search /></el-icon>
            </template>
            <template #append>
              <el-button type="primary" class="search-btn"
                         @click="searchProductsMeth()">搜索</el-button>
            </template>
          </el-input>
        </div>

        <div class="user-actions">
          <template v-if="!user.username">
            <el-link class="action-link" @click="goToLogin">你好，请登录</el-link>
            <el-link class="action-link" @click="goToReg">免费注册</el-link>
          </template>

          <el-link class="action-link" @click="goToCart">
            <el-badge :value="cartCount" :max="99" class="cart-badge">
              <el-icon :size="20"><shopping-cart /></el-icon>
              <span>购物车</span>
            </el-badge>
          </el-link>

          <el-link class="action-link" @click="goToOrders">
            <el-icon :size="20"><ticket /></el-icon>
            <span>我的订单</span>
          </el-link>

          <el-dropdown v-if="user.username" class="user-dropdown">
            <div class="user-info">
              <el-avatar :size="36">
                <img :src="user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'">
              </el-avatar>
              <span class="username">{{user.username}}</span>
              <el-icon class="dropdown-icon"><arrow-down /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="showUserCenter">
                  <el-icon><user /></el-icon>个人中心
                </el-dropdown-item>
                <el-dropdown-item divided @click="logout">
                  <el-icon><switch-button /></el-icon>退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>

    <!-- 主要内容区和页脚保持不变 -->
    <el-main class="app-main">
      <router-view/>
    </el-main>

    <el-footer class="app-footer">
      <!-- 原有页脚内容 -->
    </el-footer>
  </el-container>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {
  ArrowDown, User, SwitchButton,
  Search, ShoppingCart, Ticket,
  Opportunity, VideoPlay, Menu
} from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
import axios from "axios";
import {useRouter} from "vue-router";

const router = useRouter();

const searchKeyword = ref('');

const searchProductsMeth = () => {
  if (searchKeyword.value.trim()) {
    router.push({
      path: '/search/product',
      query: { name: searchKeyword.value.trim() }
    });
  } else {
    ElMessage.warning('请输入要搜索的商品名称');
  }
};
// 获取用户信息
const user = ref(getUser());

const logout = () => {
  if (confirm('您确定要退出登录吗？')) {
    localStorage.removeItem('user');
    window.location.href = '/login';
    user.value = '';
  }
}

// 导航方法
const goHome = () => window.location.href = '/';
const goToLogin = () => window.location.href = '/login';
const goToReg = () => window.location.href = '/reg';
const showUserCenter = () => window.location.href = '/person';
const goToOrders = () => window.location.href = '/order';
const goToCart = () => window.location.href = '/cart';
const goToLive = () => window.location.href = '/live';
const goToSupportingFarmers = () => window.location.href = '/support';
const goToAgriculturalTraceability = () => window.location.href = '/traceability';
const goToSupportPolicy = () => window.location.href = '/policy';
const goToAgriculturalTech = () => window.location.href = '/tech';

// 购物车商品数量
const cartCount = ref(0);
// 模拟获取购物车数量
onMounted(() => {
  loadProducts();
});
const cartArr = ref([]);
//定义加载购物车商品的方法
const loadProducts = () => {
  axios.get(BASE_URL+'/api/v1/cart/select').then((response)=>{
    if (response.data.code == 2000){
      cartArr.value = response.data.data;
      cartCount.value = cartArr.value.length;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
</script>

<style scoped>
.main-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  height: 64px;
  background: linear-gradient(135deg, #098 0%, #f5f7fa 100%);;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-area {
  display: flex;
  align-items: center;
  margin-right: 40px;
}

.logo-text {
  font-size: 28px;
  margin-right: 12px;
  cursor: pointer;
  transition: transform 0.3s;
}

.logo-text:hover {
  transform: scale(1.1);
}

.system-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s;
}

.system-name:hover {
  color: #5b8c00;
}

/* 优化后的导航链接样式 */
.nav-links {
  display: flex;
  margin-right: 40px;
  position: relative;
}

.nav-link {
  margin: 0 12px;
  font-size: 15px;
  color: #333;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  padding: 8px 12px;
  font-weight: 500;
  border-radius: 6px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.nav-link:hover {
  color: #5b8c00;
  transform: translateY(-2px);
  background-color: rgba(91, 140, 0, 0.05);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nav-link:active {
  transform: translateY(1px);
}

.nav-link i {
  margin-right: 6px;
  font-size: 16px;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: #5b8c00;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 70%;
}

/* 下拉菜单样式 */
.nav-dropdown {
  margin-left: 8px;
}

.nav-dropdown .nav-link {
  margin: 0;
}

/* 当前激活的导航项样式 */
.router-link-active.nav-link {
  color: #5b8c00;
  background-color: rgba(91, 140, 0, 0.1);
}

.router-link-active.nav-link::after {
  width: 70%;
}

.search-area {
  flex: 1;
  max-width: 400px;
  margin: 0 20px;
}

.search-input {
  border-radius: 20px;
  overflow: hidden;
}

.search-input :deep(.el-input__inner) {
  border-radius: 20px 0 0 20px !important;
}

.search-btn {
  border-radius: 0 20px 20px 0 !important;
  padding: 0 20px;
}

.user-actions {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.action-link {
  margin-left: 20px;
  display: flex;
  align-items: center;
  color: #666;
  font-size: 14px;
  transition: color 0.3s;
}

.action-link:hover {
  color: #5b8c00;
}

.action-link span {
  margin-left: 4px;
}

.cart-badge :deep(.el-badge__content) {
  top: 2px;
  right: 10px;
}

.user-dropdown {
  margin-left: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 20px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: #f5f7fa;
}

.username {
  margin: 0 8px;
  font-size: 14px;
  color: #333;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-icon {
  color: #999;
  font-size: 12px;
}

.app-main {
  flex: 1;
  padding: 0;
  background-color: rgba(91, 140, 0, 0.1);
}

.app-footer {
  height: auto;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  padding: 40px 0 20px;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .header-content {
    flex-wrap: wrap;
    padding: 10px;
    height: auto;
  }

  .logo-area, .search-area, .user-actions {
    width: 100%;
    margin: 10px 0;
    justify-content: center;
  }

  .nav-links {
    display: none;
  }

  /* 移动端菜单按钮 */
  .mobile-menu-btn {
    display: block;
    margin-left: 20px;
    font-size: 20px;
    cursor: pointer;
  }
}
</style>